<template>
  <div class="bg">
    <h3>计算时间</h3>
    <el-input v-model="initDate" placeholder="相恋之初"></el-input>

    <div class="date-wrapper">
      <div class="item" v-for="(item, index) in list" :key="index">
        <span
          >相识
          <span
            class="number-text"
            :style="{
              'background-image':
                'linear-gradient(135deg, ' +
                item.textColor[0].color +
                ' , ' +
                item.textColor[1].color +
                ')',
            }"
          >
            {{ item.number }}
          </span>
          <span style="margin-left: 4px;">天</span>
        </span>
        <span style="margin-left: 4px;"> {{ item.date }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { dateList } from './data'

export default {
  name: 'index',
  data () {
    return {
      initDate: '2021-12-18',
      list: [
        {
          number: 100,
          date: '2021-1212'
        }
      ]
    }
  },
  watch: {
    initDate (val) {
      val = (val || '').trim()
      if ([null, undefined, ''].includes(val)) return

      let t = new Date(val)
      this.list = dateList(t)
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.list = dateList(this.initDate)
    }
  }
}
</script>

<style lang="less" scoped>
body {
  margin: 0;
}
.bg {
  height: 100vh;
  // background: #000;
}
.date-wrapper {
  width: 100%;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  overflow: hidden;
  .item {
    display: flex;
    align-items: center;
    width: 33.3333333%;
    height: 56px;
  }

  .number-text {
    // background-image: linear-gradient(135deg, red, blue);
    background-clip: text;
    color: transparent;
    font-style: italic;
    font-size: 24px;
  }
}
</style>
